import React, { useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router-dom";

// HashRouter刷新后数据消失
// BrowserRouter 刷新后数据还在

function APage() {
  const history = useHistory();
  const { state = {} } = useLocation();
  const [value, setValue] = useState("");

  useEffect(() => {
    if (state.value) {
      setValue(state.value);
    }
  }, [state]);

  // useEffect(() => {
  //   setValue(state.value);
  // }, [state.value]);

  return (
    <>
      <input
        type="text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <button
        onClick={() => {
          history.push({
            pathname: `/keep/useLocationDetail`,
            state: { from: "/keep/useLocation", value: value },
          });
        }}
      >
        next
      </button>
    </>
  );
}

export default APage;
